<template>
	<el-card>
		<div class="scheduleRecordDivClass">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
				<el-form-item>
					<el-input v-model="state.queryForm.appName" placeholder="请输入执行器名称"></el-input>
				</el-form-item>
				<el-form-item>
					<fast-select
						v-model="state.queryForm.addressType"
						dict-type="register_type"
						placeholder="请选择注册方式"
						clearable
						filterable
					></fast-select>
				</el-form-item>

				<el-form-item>
					<el-button :icon="Search" @click="getDataList()" type="primary">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Refresh" @click="resets">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Plus" type="primary" v-auth="'task-scheduling:actuator-mana:save'" @click="addOrUpdateHandle()">新建</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
				<el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
				<el-table-column prop="appName" label="AppName" header-align="center" align="center"></el-table-column>
				<el-table-column prop="title" label="名称" header-align="center" align="center"></el-table-column>
				<fast-table-column prop="addressType" label="注册方式" dict-type="register_type" header-align="center" align="center"></fast-table-column>
				<!-- <el-table-column prop="addressType" label="注册方式" header-align="center" align="center">
					<template #default="scope">
						{{ !scope.row.addressType ? '自动注册' : '手动录入' }}
					</template>
				</el-table-column> -->
				<el-table-column prop="ip" label="执行器IP" header-align="center" align="center"></el-table-column>
				<el-table-column prop="status" label="连接状态" header-align="center" align="center">
					<template #default="scope">
						<el-tag v-if="scope.row.status == '1'" type="warning">正常</el-tag>
						<el-tag v-if="scope.row.status == '0'" type="danger">异常</el-tag>
						<el-tag v-if="scope.row.status == '2'" type="success">正常且安装探针</el-tag>
						<span v-else></span>
					</template>
				</el-table-column>

				<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
				<el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
					<template #default="scope">
						<el-button v-auth="'task-scheduling:actuator-mana:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
						<el-button
							v-auth="'task-scheduling:actuator-mana:delete'"
							type="primary"
							link
							@click="deleteHandle(scope.row.id, '删除执行器，不可恢复，请谨慎操作')"
							>删除</el-button
						>

						<el-button v-if="scope.row.addressType" type="primary" link @click="ipTest(scope.row)">测试</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</el-card>
</template>

<script setup lang="ts" name="Actuator-Mana">
import { useCrud } from '@/hooks/indexZXQ.ts'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import { actuatorIpTest } from '@/api/task-scheduling/index5s'
import { ElLoading } from 'element-plus'

const state: IHooksOptions = reactive({
	dataListUrl: '/data-development/jobExecute/page',
	deleteUrl: '/data-development/jobExecute',
	queryForm: {
		appName: '',
		addressType: ''
	}
})

const flowVisable = ref(false)

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

const resets = () => {
	state.queryForm = {
		appName: '',
		addressType: ''
	}

	state.page = 1
	state.limit = 10

	getDataList()
}

const ipTest = data => {
	const newData = {
		passWord: data.passWord,
		ip: data.ip,
		userName: data.userName,
		port: data.port,
		id: data.id
	}
	const testLoading = ElLoading.service({
		lock: true,
		text: '连接测试中...... 请稍后',
		background: 'rgba(0, 0, 0, 0.7)'
	})

	actuatorIpTest(newData)
		.then(res => {
			testLoading.close()
			if (res.data.success) {
				ElMessage.success('测试连接成功')

				getDataList()
			} else {
				ElMessage.error(res.data.msg)

				getDataList()
			}
		})
		.catch(() => {
			testLoading.close()
			ElMessage.error('测试连接失败')

			getDataList()
		})
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state)
</script>

<style lang="scss">
</style>
